<template>
  <com-card>
    <div slot="com_title">用户列表</div>
    <div slot="com_content">
      <el-row>
        <el-table :data="dataSource">
          <el-table-column label="创建时间">
            <template #default="{ row }">
              {{ row.ctime | timeMF }}
            </template>
          </el-table-column>
          <el-table-column prop="account" label="账号"></el-table-column>
          <el-table-column prop="userGroup" label="用户组"></el-table-column>
          <el-table-column label="操作">
            <!-- <template v-slot:default="{row}"> -->
            <template slot-scope="{ row }">
              <el-button type="danger" @click="del(row.id)">删除</el-button>
              <el-button type="warning" @click="goupd(row)">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-row>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchObj.currentPage"
          :page-sizes="[2, 4, 6]"
          :page-size="searchObj.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-row>

      <!-- 弹窗 -->
      <!-- close-on-click-modal弹窗只能通过x按钮或者取消按钮关闭 -->
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        :close-on-click-modal="false"
      >
        <el-form
          label-width="70px"
          size="small"
          style="width: 270px"
          :model="formObj"
        >
          <el-form-item label="用户名：">
            <el-input type="text" v-model="formObj.account"></el-input>
          </el-form-item>
          <el-form-item label="用户组：">
            <el-select placeholder="请选择用户组" v-model="formObj.userGroup">
              <el-option value="超级管理员" label="超级管理员"></el-option>
              <el-option value="普通管理员" label="普通管理员"></el-option>
            </el-select>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="doupdate()"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </com-card>
</template>

<script>
import ComCard from "../../components/comCard";
import { api_query, api_delete,api_update } from "../../api/users";
// import moment from "moment";
export default {
  // filters: {
  //   timeMF(val) {
  //     return moment(val).format("YYYY-MM-DD hh:mm:ss");
  //   },
  // },
  components: {
    ComCard,
  },
  data() {
    return {
      // 弹窗默认为隐藏
      dialogVisible: false,
      formObj: {
        id:"",
        account: "",
        userGroup: "超级管理员",
      },
      dataSource: [],
      searchObj: {
        currentPage: 1,
        pageSize: 2,
      },
      total: 0, //记录总得数据库的数据条数
    };
  },
  mounted() {
    this.query();
  },

  methods: {
    // 修改后保存
    async doupdate(){
     let rst= await api_update(this.formObj);
     let {code,msg}=rst;
     if(code==0){
       this.query();
       this.dialogVisible=false;
     }
     console.log(rst);
    },
    // 定义查询数据的方法
    async query() {
      let rst = await api_query(this.searchObj);
      let { data, total } = rst;
      this.dataSource = data;
      this.total = total;
      console.log(rst);
    },
    del(a) {
      // 根据id删除api

      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let rst = await api_delete({ id: a });
          let { code } = rst;
          if (code == 0) {
          }
          this.query();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    // 当条数下拉框的值变化是
    handleSizeChange(val) {
      console.log(val);
      this.searchObj.pageSize = val;
      this.query();
    },
    //当页码数变化触发
    handleCurrentChange(a) {
      this.searchObj.currentPage = a;
      this.query();
    },
    goupd(row) {
      console.log(row);
      let{id,
        account,
        userGroup}=row;
        this.formObj={
          id,
        account,
        userGroup
        }
      this.dialogVisible = true;
    },
    
  },
};
</script>

<style lang="less" scoped></style>
